<template>
  <div class="app-container">
    <el-card>
      <h3 style="margin-top: 0">首页标题配置</h3>
      <div class="app__form__container" v-loading="loadingForm1">
        <div class="form__item__container">
          <div class="item__label">标题类型</div>
          <div class="item__value">
            <el-radio-group v-model="formData1.type">
              <el-radio :label="1">文字</el-radio>
              <el-radio :label="2">图片</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="form__item__container">
          <div class="item__label">标题内容</div>
          <div class="item__value" v-if="formData1.type === 1">
            <el-input
              clearable
              placeholder="请输入标题文字"
              v-model="formData1.content"
            ></el-input>
          </div>
          <div class="item__img__container" v-else>
            <SingleUpload v-model="formData1.content" />
          </div>
        </div>
        <div class="form__item__container">
          <el-button type="primary" @click="handleSaveFormData(1)"
            >保存</el-button
          >
        </div>
      </div>
      <h3>首页筛选配置</h3>
      <div class="app__form__container" v-loading="loadingForm2">
        <div class="form__item__container">
          <div class="item__label">是否开启筛选功能</div>
          <div class="item__value">
            <el-radio-group v-model="formData2.type">
              <el-radio :label="1">不开启</el-radio>
              <el-radio :label="2">开启</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup name="HomePageManagement">
defineOptions({
  name: "HomePageManagement",
  inheritAttrs: false,
});
import { getIndexInfo, editIndexInfo } from "@/api/homePageManagement/index";
import { type PageTitleConfig } from "@/api/homePageManagement/types";

const formData1 = ref<PageTitleConfig>({
  type: 1,
  content: "",
});
const formData2 = ref<PageTitleConfig>({
  type: 2, // 是否开启筛选功能 1 不开启 2 开启
});

const loadingForm1 = ref<boolean>(false);
const loadingForm2 = ref<boolean>(false);

// 根据id获取首页配置内容
const getIndexInfoService = async (id: number) => {
  let params = {
    id: id,
  };
  switch (id) {
    case 1:
      loadingForm1.value = true;
      break;
    case 2:
      loadingForm2.value = true;
      break;

    default:
      break;
  }
  let res = await getIndexInfo(params);
  switch (id) {
    case 1:
      loadingForm1.value = false;
      break;

    default:
      break;
  }
  console.log("获取首页配置成功  ", res);
  if (res) {
    switch (id) {
      case 1:
        formData1.value.type = res.data.info.type;
        formData1.value.content = res.data.info.content;
        break;

      default:
        break;
    }
  }
};

// 修改首页标题配置
const editIndexInfoService = async (id: string | number) => {
  let data: { [key: string]: any } = {};
  switch (id) {
    case 1:
      data = {
        type: formData1.value.type,
        content: formData1.value.content,
      };
      break;

    default:
      break;
  }
  let res = await editIndexInfo(id, data);
  if (res) {
    ElMessage({
      type: "success",
      message: "修改成功",
    });
    getIndexInfoService(Number(id));
  }
};

// 保存按钮触发
const handleSaveFormData = async (id: number) => {
  ElMessageBox.confirm("您确定保存吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      editIndexInfoService(id);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

getIndexInfoService(1);
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .app__form__container {
    padding: 10px 40px;
    .form__item__container {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      .item__label {
        flex-shrink: 0;
        margin-right: 10px;
        font-weight: bold;
      }
      .item__value {
        flex: 1 1 auto;
      }
      .item__img__container {
        // width: 180px;
      }
    }
  }
}
</style>
